<template>
    <VBar :options="options" :height="props.height" />
</template>

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
import VBar from './index.vue'

interface Props {
    title?: string
    smooth?: any
    areaStyle?: any
    tooltip?: any
    legends?: any
    grid?: any
    height?: number
    categories: string[]
    datas: any
}

const props = withDefaults(defineProps<Props>(), {
    title: '',
    smooth: true,
    areaStyle: {},
    tooltip: {},
    legends: {},
    height: 300,
    grid: {
        left: '3%',
        right: '3%',
        bottom: '3%',
        containLabel: true
    }
})

const options = ref<any>({})
watchEffect(() => {
    let legends : any[] = []
    let series : any[] = []
    Object.keys(props.datas).forEach((key) => {
        legends.push(key)
        if (Array.isArray(props.datas[key])) {
            series.push({
                name: key,
                type: 'line',
                smooth: props.smooth,
                areaStyle: props.areaStyle,
                data: Object.values(props.datas[key])
            })
        } else {
            series.push({
                name: key,
                type: 'line',
                smooth: props.smooth,
                areaStyle: props.areaStyle,
                data: Object.values(props.datas[key])
            })
        }
    })
    options.value = {
        title: props.title,
        tooltip: props.tooltip,
        legend: {
            ...props.legends,
            data: legends
        },
        grid: props.grid,
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            data: props.categories
        }],
        yAxis: [{
            type: 'value'
        }],
        series: series
    }
    console.log(options.value)
})

</script>